<template>
    <div class="arrow-container">
      <el-icon class="arrow" v-for="index in 3" :key="index"  :class="isHighRef ? 'up-arrow' : 'down-arrow'">
        <div class="arrow-wrapper"> <!-- 用一个包裹层来处理旋转 -->
        <CaretBottom />
      </div>
      </el-icon>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { CaretBottom } from '@element-plus/icons-vue'; // 导入 Element Plus 图标
  import { ref ,defineProps, watch,toRef} from 'vue'; // 导入 ref 函数
  let rgb = ref([0, 255, 140]); // 创建一个 ref 类型的变量 rgb
  let isHigh = defineProps({ "isHigh": Boolean }); // 定义一个 props 参数 isHigh
  let isHighRef = toRef(isHigh, 'isHigh');
 
  // 每秒打印一次 isHigh 的值
  // setInterval(() => {
  //   // isHigh.value = !isHigh.value;
  //   console.log("isHigh",isHigh);
  //   console.log("isHighRef",isHighRef);
  //   console.log("m",m);
  // }, 3000);

  </script>
  
  <style scoped>
  .arrow-container {
    position: relative;
    top: 15%;
    width: 40%;
    height: 65%;
  }
  .arrow-wrapper {
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* 向上时旋转箭头 */
.up-arrow .arrow-wrapper {
  transform: rotate(180deg); /* 旋转箭头使其指向上方 */
}

/* 向下时保持默认方向 */
.down-arrow .arrow-wrapper {
  transform: rotate(0deg); /* 保持原始方向 */
}
  .arrow {
    font-size: 125%; /* 调整图标大小 */
    /* color: rgb(0, 255, 140); 设置图标颜色 */
    position: absolute;
    left: 30%;
    transform: translateX(-50%); 
    animation: loop 6s linear infinite; /* 将动画持续时间改为6秒 */
  }
  

/* 向下流动的动画 */
@keyframes loop-down {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 100%);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 200%);
    opacity: 0;
  }
}

/* 向上流动的动画 */
@keyframes loop-up {
  0% {
    transform: translate(-50%, 200%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 100%);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
}

/* 设置每个箭头的初始位置 */
.down-arrow:nth-child(1),
.up-arrow:nth-child(1) {
  animation-delay: 0s;
}

.down-arrow:nth-child(2),
.up-arrow:nth-child(2) {
  animation-delay: 2s;
}

.down-arrow:nth-child(3),
.up-arrow:nth-child(3) {
  animation-delay: 4s;
}

/* 向下箭头的类，保持默认方向 */
.down-arrow {
  animation-name: loop-down;
}

/* 向上箭头的类，旋转箭头图标 */
.up-arrow {
  animation-name: loop-up;
}
  </style>
  